如果有錯誤，歡迎留言指教~ Q_Q

什麼是 Hook?

Hook 是 React 16.8 中增加的新功能。它讓你不必寫 class 就能使用 state 以及其他 React 的功能。

Hook 是 function，他讓你可以從 function component「hook into」React state 與生命週期功能。Hook 在 class 裡面沒有辦法用——他們讓你不用 class 就能使用 React。

需要 Hook 的理由

理由1: 方便共用擁有狀態邏輯的程式碼

在 class 共用狀態邏輯很麻煩

通常用 render props 或用 provider ...等等傳遞狀態

但可能在各個 component 依賴包來包去的情況下

共用邏輯也可能需要改來改去，也會因為層級的關係，維護不便

在 Hook 就可以自己創個 customHook → 狀態直接分享使用

理由2: 不再被 lifecycle 綁手綁腳

在 lifecycle 裡面，常常不相關的邏輯會放在同一個方法

相同邏輯的程式碼又因為 lifecycle 分散在不同地方

增加了維護的麻煩，和在 Component 之間重用 Stateful 的邏輯的困難

理由3: 可以不用煩惱 this

常常搞不清楚 this (還是只有我!?)

hook 是 function， function 沒有 instance 所以沒有 this

所以不需要再 bind(this) 去設定 state 和 event

理由4:程式碼可以..少一點(我就懶)

Class Component

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          ...
        };
    }
    
    ...
};

Function Component(React Hook)

const App = () => {
    const [value, setValue] = useState({
        ...
    });

};

總之

在 Hook 不要想著生命週期，只要想著元件的狀態，和會呈現的效果

但 React 目前沒有計畫要 移除 class，所以還是要會 XD